<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>

	<meta charset="UTF-8">

	<!--BootStrap设计的页面支持响应式的 -->

	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!-- 引入主题  -->

	<link href="/bootstrap-3.3.7/css/bootstrap-theme.min.css" th:href="@{/bootstrap-3.3.7/css/bootstrap-theme.min.css}"rel="stylesheet" />

	<!-- 引入bootstrap的css -->

	<link href="/bootstrap-3.3.7/css/bootstrap.min.css"th:href="@{/bootstrap-3.3.7/css/bootstrap.min.css}" rel="stylesheet" />

	<!-- 引入jquery的js  因为bootstrap使用到jquery的js -->

	<script src="/js/jquery-3.3.1.min.js" th:src="@{/js/jquery-3.3.1.min.js}"></script>

	<!-- 引入bootsrap的js -->

	<script src="/bootstrap-3.3.7/js/bootstrap.min.js" th:src="@{/bootstrap-3.3.7/js/bootstrap.min.js}"></script>
	<!--    进度条-->
	<link rel="stylesheet" href="blue/pace-theme-corner-indicator.css">
	<script src="js/pace.js"></script>
<!--加载复选框方法定义-->
<script>
	$(document).ready(function () {
		//全选和反选
		$("[name='selectall']").click(
				function () {
					if($(this).is(':checked')){

						$("[name='mycheck']").each(function () {

							$(this).attr('checked',true);
						})
					}else{
						$("[name='mycheck']").each(function () {

							$(this).attr('checked',false);
						})
					}
				}
		)
		//	分选
		$("[name='mycheck']").click(function () {
			var allchecked =true;
			$("[name='mycheck']").each(function () {
				if(!$(this).is(':checked')){
					allchecked=false;
				}
			})
			if(allchecked){
				$("[name='selectall']").attr('checked',true);
			}
			else{
				$("[name='selectall']").attr('checked',false);
			}
		})
	})

</script>
	<title>购物车</title>
	<style>

		.xiaotaoobject {
			height: 140px;
			width: 140px;
			object-fit: contain;
		}
		.mybtn{

		align-content: center;
			margin-top: 35px;
		}
		.mybtn2{
			align-content: center;
			margin-top: 45px;
		}
		.mybtn3{
			align-content: center;
			margin-top: 35px;

		}
		.mycheck{
			margin-top: 40px;
		}
		.s1{
			margin-top: 5px;
			width:auto;
		}
		body{
			background-image: url("images/背景.jpg");
		}
	</style>

</head>
<body>
<!--总的容器-->
<div class="container">
<!--第一行组件，通用的	-->
	<div class="row clearfix">
		<div class="col-md-6 column">
			<div class="row clearfix">
				<div class="col-md-6 column">
					<img alt="小淘图标" class="xiaotaoobject"  src="images/order_a.jpg" />
				</div>
				<div class="col-md-6 column">
					<div class="page-header">
						<h1>
							小淘商城<p><small>2020最新潮流</small></p>
						</h1>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-6 column">
			<ul class="breadcrumb">
				<li>
					<a href="/">首页</a>
				</li>
				<li class="active">
					购物车
				</li>
			</ul>
<!--			遮罩窗体-->
			<a id="modal-230202" href="#modal-container-230202" role="button" class="btn" data-toggle="modal">优惠券提示信息</a>

			<div class="modal fade" id="modal-container-230202" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
							<h4 class="modal-title" id="myModalLabel">
								优惠券提示信息
							</h4>
						</div>
						<div class="modal-body">
							<p>优惠券类型有两种，第一种是满减，例如满300-50；第二种是打折，例如打八折。</p>
							<p>点击商品栏的“优惠”可以方便查看该商品参与的优惠活动哦</p>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
						</div>
					</div>

				</div>

			</div>

		</div>
	</div>

	<div class="row">
		<div class="col-md-2 car-menu">

		</div>
		<div class="col-md-2 car-menu">商品详情页</div>
		<div class="col-md-2 car-menu">商品参数</div>
		<div class="col-md-2 car-menu">单价</div>
		<div class="col-md-2 car-menu">数量</div>
		<div class="col-md-1 car-menu">金额</div>

	</div>


	<!--/*@thymesVar id="MobilePhoneList" type="com.example.login.Pojo.mobileGoods"*/-->
	<div th:each="mobile:${MobilePhoneList}">
	    <div class="row clearfix thumbnail">
		    <div class="col-md-12 column">
			     <div class="row clearfix">
<!--				checkbox-->
				<div>
					<input type="checkbox"  th:name="${mobile.id+' '+mobile.sku_code}" onclick="change(this)">
				</div>
				<div class="col-md-6 column">

					<div class="row clearfix">

						<div class="col-md-4 column">
							<img alt="140x140"class="xiaotaoobject" id="img" th:src="@{'/Image/'+${mobile.goodImage}}" width="180px" />
						</div>
						<div class="col-md-4 column">
							<div class="page-header">
<!--								后面加的-->
								<div class="page-header">
									<!--									店铺名-->
									<p>
										店铺名：<a >小淘的海洋</a>
									</p>
									<!--							文字是商品名字，跳转链接是商品详情页-->
									<p>
										<a th:href="@{'/item/'+${mobile.id}}" th:text="${mobile.item_name}"></a>
									</p>
								</div>
<!--								到此为止-->
<!--								原来的-->
<!--								<p>-->
<!--								<h4><a th:href="@{'/item/'+${mobile.id}}" th:text="${mobile.item_name}"></a></h4>-->
<!--								</p>-->
							</div>
						</div>
						<div class="col-md-4 column mybtn ">

							<a value="0" th:text="${mobile.color}+'+'+${mobile.ROM}+'+'+${mobile.RAM}+'+'+${mobile.network}"></a>


						</div>
					</div>
				</div>
				<div class="col-md-6 column">
					<div class="row clearfix">
						<div class="col-md-4 column">
							<div class="page-header">
							<p>
								单价：<strong th:text="${mobile.price}" th:id="'p'+${mobile.id+' '+mobile.sku_code}"></strong>
								</p>
							</div>
						</div>
						<div class="col-md-4 column">
							<div class="row mybtn3">

								<input class="btn-group" type="button"  th:name="${mobile.id+' '+mobile.sku_code}" value="-" onclick="reductionOf(this)" />

								<input style="width: 30px" class="btn-group" th:id="${mobile.id+' '+mobile.sku_code}" type="text"  th:value="${NumMap[mobile.id+' '+mobile.color+mobile.ROM+mobile.RAM+mobile.network]}" onblur="checkNumber(this)" />

								<input class="btn-group"  type="button" th:name="${mobile.id+' '+mobile.sku_code}" value="+" onclick="add(this)" />

							</div>
						</div>
						<div class="col-md-4 column">
							<div class="page-header">
<!--							单项商品的总价，还没写js控制-->
								小计：<strong  th:id="${mobile.id+' '+mobile.sku_code}+'p'" th:text="${mobile.price}*${NumMap[mobile.id+' '+mobile.color+mobile.ROM+mobile.RAM+mobile.network]}" id="price"></strong>
							</div>
						</div>
					</div>
				</div>
			</div>
		    </div>
		</div>
	</div>

<!--	演示静态商品到此为止，如果可以的话可以在这段里面改，之前的可以删掉-->
	<!--/*@thymesVar id="PCList" type="com.example.login.Pojo.PCGoods"*/-->
	<div th:each="pc:${PCList}">
		<div class="row clearfix thumbnail">
			<div class="col-md-12 column">
				<div class="row clearfix">
					<!--				checkbox-->
					<div>
						<input type="checkbox" th:name="${pc.id+' '+pc.sku_code}" onclick="change(this)" >
					</div>
					<div class="col-md-6 column">

						<div class="row clearfix">

							<div class="col-md-4 column">
								<img alt="140x140"class="xiaotaoobject" id="img"th:src="@{'/Image/'+${pc.goodImage}}" width="180px" />
							</div>
							<div class="col-md-4 column">
								<div class="page-header">
									<p>
									<h4><a th:href="@{'/item/'+${pc.id}}" th:text="${pc.item_name}"></a></h4>
									</p>
								</div>
							</div>
							<div class="col-md-4 column mybtn ">

								<select class=" s1">
									<option value="0" th:text="${pc.color}+'+'+${pc.ROM}+'+'+${pc.RAM}"></option>
									<option value="1"></option>
								</select>

							</div>
						</div>
					</div>
					<div class="col-md-6 column">
						<div class="row clearfix">
							<div class="col-md-4 column">
								<div class="page-header">
									<p>
										单价：<strong th:text="${pc.price}" th:id="'p'+${pc.id+' '+pc.sku_code}"></strong>
									</p>
								</div>
							</div>
							<div class="col-md-4 column">
								<div class="row mybtn3">

									<input class="btn-group" type="button" th:name="${pc.id+' '+pc.sku_code}"value="-" onclick="reductionOf(this)" />

									<input style="width: 30px" class="btn-group"  type="text"   th:id="${pc.id+' '+pc.sku_code}" th:value="${NumMap[pc.id+' '+pc.color+pc.ROM+pc.RAM]}" onblur="checkNumber(this)" />

									<input class="btn-group"  type="button" th:name="${pc.id+' '+pc.sku_code}"value="+" onclick="add(this)" />

								</div>
							</div>
							<div class="col-md-4 column">
								<div class="page-header">
									<!--							单项商品的总价，还没写js控制-->
									小计：<strong th:id="${pc.id+' '+pc.sku_code}+'p'"th:text="${pc.price}*${NumMap[pc.id+' '+pc.color+pc.ROM+pc.RAM]}" id="price"></strong>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--/*@thymesVar id="MP3List" type="com.example.login.Pojo.mp3Goods"*/-->
	<div th:each="mp3:${MP3List}">
		<div class="row clearfix thumbnail">
			<div class="col-md-12 column">
				<div class="row clearfix">
					<!--				checkbox-->
					<div>
						<input type="checkbox" th:name="${mp3.id+' '+mp3.sku_code}" onclick="change(this)">
					</div>
					<div class="col-md-6 column">

						<div class="row clearfix">

							<div class="col-md-4 column">
								<img alt="140x140"class="xiaotaoobject" id="img"th:src="@{'/Image/'+${mp3.goodImage}}" width="180px" />
							</div>
							<div class="col-md-4 column">
								<div class="page-header">
									<p>
									<h4><a th:href="@{'/item/'+${mp3.id}}" th:text="${mp3.item_name}"></a></h4>
									</p>
								</div>
							</div>
							<div class="col-md-4 column mybtn ">

								<select class=" s1">
									<option value="0" th:text="${mp3.color}+'+'+${mp3.ROM}" >选项A</option>

								</select>

							</div>
						</div>
					</div>
					<div class="col-md-6 column">
						<div class="row clearfix">
							<div class="col-md-4 column">
								<div class="page-header">
									<p>
										单价：<strong th:text="${mp3.price}" th:id="'p'+${mp3.id+' '+mp3.sku_code}"></strong>
									</p>
								</div>
							</div>
							<div class="col-md-4 column">
								<div class="row mybtn3">

									<input class="btn-group" type="button"  th:name="${mp3.id+' '+mp3.sku_code}"value="-" onclick="reductionOf(this)" />

									<input style="width: 30px" class="btn-group"   th:id="${mp3.id+' '+mp3.sku_code}"type="text"  th:value="${NumMap[mp3.id+' '+mp3.color+mp3.ROM]}" onblur="checkNumber(this)" />

									<input class="btn-group"  type="button"  th:name="${mp3.id+' '+mp3.sku_code}" value="+" onclick="add(this)" />

								</div>
							</div>
							<div class="col-md-4 column">
								<div class="page-header">
									<!--							单项商品的总价，还没写js控制-->
									小计：<strong th:id="${mp3.id+' '+mp3.sku_code}+'p'"th:text="${mp3.price}*${NumMap[mp3.id+' '+mp3.color+mp3.ROM]}" id="price"></strong>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

<!--	所有商品的总计和管理-->
	<div class="row clearfix thumbnail">
		<div class="col-md-12 column">
			<div class="row clearfix">
				<div class="col-md-6 column">
					<div class="row clearfix">
						<div class="col-md-4 column mycheck ">
							<input type="checkbox" name="selectall">全选
						</div>
						<div class="col-md-4 column mybtn">
							<button type="button" class="btn btn-default"><a onclick="de(this)" href="">删除</a></button>
						</div>
						<div class="col-md-4 column mybtn">
							<button type="button" class="btn btn-default">移入收藏夹</button>
						</div>
					</div>
				</div>
				<div class="col-md-6 column">
					<div class="row clearfix">
						<div class="col-md-4 column">
							<div class="page-header">
								<p>
									已选商品<a text=""id="choose">0</a>件
								</p>
							</div>
						</div>
						<div class="col-md-4 column">
							<div class="page-header">
									<p>
										合计：<a id="total" text="0">0</a>元
									</p>
							</div>
						</div>
						<div class="col-md-4 column">
<!--							跳转到结算页面-->
							<button type="button"  class="btn btn-default mybtn" ><a onclick="getTotal(this)" href="">结算</a></button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!--商品数量-->
<script>
	//减数量
	function reductionOf(obj) {
		//减前判断
		if ($(obj).next().val() === ''||parseInt($(obj).next().val()) === 0) {
			$(obj).next().val(1);
		}
		$(obj).next().val(parseInt($(obj).next().val()) - 1);//数值减
		$(obj).next().val($(obj).next().val());//赋值给框
		numMap[obj.name]=document.getElementById(obj.name).value;
		var price3 = parseInt(document.getElementById('p'+obj.name).textContent);
		document.getElementById(obj.name+'p').textContent=numMap[obj.name]*price3;

		if(temp[obj.name]!=0)
		{
			temp[obj.name]=numMap[obj.name];
			document.getElementById('total').textContent=totalPrice-price3;
			totalPrice-=price3;
		}
	};
	//加数量
	function add(obj) {
		//加前判断
		if ($(obj).prev().val() === '') {
			$(obj).prev().val(1);
		}
		$(obj).prev().val(parseInt($(obj).prev().val()) + 1);//数值加
		$(obj).prev().val($(obj).prev().val());//赋值给框
		numMap[obj.name]=document.getElementById(obj.name).value;
		var price2 = parseInt(document.getElementById('p'+obj.name).textContent);
		document.getElementById(obj.name+'p').textContent=numMap[obj.name]*price2;
		if(temp[obj.name]!=0)
		{
			temp[obj.name]=numMap[obj.name];
			document.getElementById('total').textContent=totalPrice+price2;
			totalPrice+=price2;
		}
	};
	//校验数字格式（只能输入正整数）
	function checkNumber(obj) {
		var reg = /^[1-9]\d*$/;
		if(!reg.test($(obj).val()) || $(obj).val()===''){
			$(obj).val(1);
		}
	}
</script>
<script th:inline="javascript">
	//引入变量
	const mp3s=[[${MP3List}]];
	const pcs=[[${PCList}]];
	const mobiles=[[${MobilePhoneList}]];
	let numMap=[[${NumMap}]];
	let temp={};
	for( key in numMap)
	{
			temp[key]=0;
	}
	//总金额
	var totalPrice;
	//选择数组
	var mp3Array=new Array(mp3s.length);
	var pcArray=new Array(pcs.length);
	var mobileArray=new Array(mobiles.length);
	var information=new String("");
	var price;
	var yuan=parseInt(document.getElementById("total").textContent);
	function change(obj)
	{
		if(obj.checked==true)
		{
			temp[obj.name]=numMap[obj.name];
			//更新以选商品数量
			var t=document.getElementById("choose").textContent
			document.getElementById("choose").textContent=parseInt(t)+1;
			price=parseInt(document.getElementById(obj.name+'p').textContent);
			yuan=parseInt(document.getElementById("total").textContent);
			document.getElementById("total").textContent=yuan+price;
			totalPrice=yuan+price;
		}
		else{
			temp[obj.name]=0;
			var t=document.getElementById("choose").textContent
			document.getElementById("choose").textContent=parseInt(t)-1;
			price=parseInt(document.getElementById(obj.name+'p').textContent);
			yuan=parseInt(document.getElementById("total").textContent);
			document.getElementById("total").textContent=yuan-price;
			totalPrice=yuan-price;
		}
	}
	function getTotal(obj)
	{
		for(var i=0;i<mobiles.length;i++)
		{
			information+=(temp[mobiles[i].id+' '+mobiles[i].sku_code]+'_');
		}
		for(var i=0;i<pcs.length;i++)
		{
			information+=(temp[pcs[i].id+' '+pcs[i].sku_code]+'_');
		}
		for(var i=0;i<mp3s.length;i++)
		{
			if(i<mp3s.length-1)
			{
				information+=(temp[mp3s[i].id+' '+mp3s[i].sku_code]+'_');
			}
			else{
				information+=temp[mp3s[i].id+' '+mp3s[i].sku_code];
			}

		}
		obj.href="/user/getTotal/"+information+'/'+totalPrice;
	}
	function de(obj)
	{
		for(var i=0;i<mobiles.length;i++)
		{
			information+=(temp[mobiles[i].id+' '+mobiles[i].sku_code]+'_');
		}
		for(var i=0;i<pcs.length;i++)
		{
			information+=(temp[pcs[i].id+' '+pcs[i].sku_code]+'_');
		}
		for(var i=0;i<mp3s.length;i++)
		{
			if(i<mp3s.length-1)
			{
				information+=(temp[mp3s[i].id+' '+mp3s[i].sku_code]+'_');
			}
			else{
				information+=temp[mp3s[i].id+' '+mp3s[i].sku_code];
			}

		}
		obj.href="/user/delete/"+information;
	}
</script>

</body>
</html>